<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../index/index.css">
  <link rel="stylesheet" href="../mine/mine.css">
  <link rel="stylesheet" href="../css/swiper-bundle.css">
  <script src="../js/swiper-bundle.js"></script>
</head>

<body>
  <div id="index">
    <!-- logo -->
    <div class="index-top">
      <img src="../image/logo.png" alt="" srcset="">
      <div class="top-right">
        <img src="../image/电话01-F.png" alt="" srcset="">
        <div class="top-text">咨询我们：12345678900</div>
      </div>
    </div>
    <!-- 导航 -->
    <div class="index-nav">
      <div class="index-nav1">
        <div class="nav1"><a href="../index/index.html">首页</a></div>
        <div class="nav1"><a href="../site/site.html">网站开发</a></div>
        <div class="nav1"><a href="../app/app.html">APP开发</a></div>
        <div class="nav1"><a href="../procedure/procedure.html">小程序开发</a></div>
        <div class="nav1"><a href="../case/case.html">案例</a></div>
        <div class="nav1"><a href="#">关于我们</a></div>
      </div>
    </div>
    <!-- 轮播图 -->
    <div class="swiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img class="image" src="../image/swiper.png" alt="">
        </div>
        <div class="swiper-slide">
          <img class="image" src="../image/swiper.png" alt="">
        </div>
        <div class="swiper-slide">
          <img class="image" src="../image/swiper.png" alt="">
        </div>
      </div>
      <!--如果需要滚动条-->
      <!-- <div class="swiper-pagination"></div>        -->
    </div>
  </div>
  <div class="mine">
    <div class="mine-img">
      <img src="../image/mine.png" alt="">
      <div class="mine-text">
        <p>关于我们</p>
        <p>我们一直专注于互联网核心技术服务，为企提供技术服务
          主要业多范图有小理序开发、微信开发、APP开发、电商系统开发
          OA管理系统、CAL(人脸识别)开发等互联网+领域.我们致力于为
          企业提供▣、定的技术研发支持.<br />
          我们是一支追求品质完美、力求不超越自己的团队，每一位成员是
          亲密的伙伴，与公司一起成长发展，我们珍惜每一次合作的机会，来
          挑战完美、精益求精的团队華承专业的设计。
        </p>
      </div>
    </div>
  </div>
  <!-- 企业文化 -->
  <div class="curtul">
    <div class="title">企业文化</div>
    <div class="curtul-content">
      <div class="curtul1">
        <img class="img1" src="../image/联系人.png" alt="">
        <img class="img2" src="../image/联系人 (1).png" alt="">
        <p>企业使命</p>
        <p>提供有克争力的方客和服务，
          为客户创造最大价值，为信息
          化时代贡献一份力量</p>
      </div>
      <div class="curtul1">
        <img class="img1" src="../image/收藏.png" alt="">
        <img class="img2" src="../image/收藏 (1).png" alt="">
        <p>企业使命</p>
        <p>提供有克争力的方客和服务，
          为客户创造最大价值，为信息
          化时代贡献一份力量</p>
      </div>
      <div class="curtul1">
        <img class="img1" src="../image/钻石 (1).png" alt="">
        <img class="img2" src="../image/钻石 (2).png" alt="">
        <p>企业使命</p>
        <p>提供有克争力的方客和服务，
          为客户创造最大价值，为信息
          化时代贡献一份力量</p>
      </div>
    </div>
  </div>
  <!-- 关于我们 -->
   <div class="about">
    <div class="title">关于我们</div>
    <div class="about-content">
      <div class="about1">
        <p>666<span>+</span></p>
        <p>客户的选择</p>
      </div>
      <div class="about1">
        <p>666<span>+</span></p>
        <p>客户的选择</p>
      </div>
      <div class="about1">
        <p>666<span>+</span></p>
        <p>客户的选择</p>
      </div>
      <div class="about1">
        <p>666<span>+</span></p>
        <p>客户的选择</p>
      </div>
    </div>
   </div>
   <!-- 联系我们 -->
   <div class="box4">
    <div class="box41">
      <div class="box41-1">
        <div class="box41-11">
          <div><img src="../image/服务 (1).png" alt="">&nbsp;&nbsp;&nbsp; 联系我们</div>
          <div><img src="../image/楼层.png" alt="">&nbsp;&nbsp;&nbsp; 山东百瑞软件科技有限公司</div>
          <div><img src="../image/电话01-F.png" alt="">&nbsp;&nbsp;&nbsp;0538-2110108</div>
          <div><img src="../image/邮箱.png" alt="">&nbsp;&nbsp;&nbsp; WF18661349342@163.COM</div>
          <div>
            <img src="../image/地址.png" alt="">&nbsp;&nbsp;&nbsp;
            济南市长清区崮云湖街道芙蓉路中国创新谷西城
            软件园A3楼503室
          </div>
        </div>
        <div class="box41-12">
          <div class="box41-121"><img src="../image/编辑.png" alt=""> 填写留言</div>
          <div class="box41-122">
            <form action="#">
              <input type="text" placeholder="姓名：">
              <input type="text" placeholder="邮箱：">
              <input type="text" placeholder="电话：">
              <textarea name="" id=""></textarea><br />
              <button type="submit">提交</button>
            </form>
          </div>
        </div>
      </div>
      <div class="box41-2">
        <div>详细地图</div>
        <div>
          <iframe id="geoPage" width=100% height=400px frameborder=0  scrolling="no"
            src="https://apis.map.qq.com/tools/poimarker?type=0&marker=coord:36.201159,117.03738;
            title:山东省泰安市岱岳区环湖路&key=T6SBZ-UIPWG-NGRQV-QYPNV-EVQT6-LZFUQ&referer=myapp">
          </iframe>
        </div>
      </div>
    </div>
  </div>
  <div id="index">
    <!-- 脚部 -->
    <div class="footer">
      <div class="footer-title">
        <div class="footer1">
          <p>山东柏瑞设计有限公司</p>
          <p>联系电话：123456678900</p>
          <p>地址  济南创新谷2号楼孵化器五楼(长清区海棠路与芙蓉路交叉路口东南)</p>
        </div>
        <div class="footer-img">
          <img src="../image/二维码.png" alt="" srcset="">
          <p>微信公众号</p>
        </div>
      </div>
     </div>
     <div class="foot">
      Shandong Bairui Software Technology Co.,Ltd.山东拍瑞软件科技有限公司版权所有鲁ICP备17006298号-1
     </div>
  </div>
</body>
<script>
  var mySwiper = new Swiper('.swiper', {
    autoplay: {
      delay: 2000,
    },
    loop: true,//循环模式选项
    // 如果需要滚动条
    pagination: {
      el: '.swiper-pagination',
    },
  })
  var swiper = new Swiper(".mySwiper2", {
    slidesPerView: 5,
    spaceBetween: 30,
    loop: true,
    centeredSlides: false,
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },
    autoplay: {
      delay: 3000,
    },
  });
</script>

</html>